import Vue from 'vue'
import anime from 'animejs'

interface AnimeArguments {
  targets?: HTMLElement | HTMLElement[] | string | string[]
  duration?: number
  delay?: number
  endDelay?: number
  easing?: string
  direction?: string
  loop?: boolean
  autoplay?: boolean
  width?: number | string | object
  height?: number | string | object
  padding?: number | string | string[] | object
  paddingTop?: number | string | object
  paddingBottom?: number | string | object
  paddingLeft?: number | string | object
  paddingRight?: number | string | object
  margin?: number | string | string[] | object
  marginTop?: number | string | object
  marginBottom?: number | string | object
  marginLeft?: number | string | object
  marginRight?: number | string | object
  top?: number | string | object
  bottom?: number | string | object
  left?: number | string | object
  right?: number | string | object
  backgroundColor?: string | object
  borderRadius?: string[] | object
  translateX?: number | string | object
  translateY?: number | string | object
  translateZ?: number | string | object
  rotate?: number | string | object
  rotateX?: number | string | object
  rotateY?: number | string | object
  rotateZ?: number | string | object
  scale?: number | object
  scaleX?: number | object
  scaleY?: number | object
  scaleZ?: number | object
  skew?: number | string | object
  skewX?: number | string | object
  skewY?: number | string | object
  perspective?: number | string | object
  update?: (args: AnimeCallbackArgs) => any
  begin?: (args: AnimeCallbackArgs) => any
  complete?: (args: AnimeCallbackArgs) => any
  loopBegin?: (args: AnimeCallbackArgs) => any
  loopComplete?: (args: AnimeCallbackArgs) => any
  change?: Function
  changeBegin?: Function
  changeComplete?: Function
}

interface AnimeCallbackArgs {
  progress: number
  began: boolean
  completed: boolean
  loopBegan: boolean
  loopCompleted: boolean
  pause: Function
  play: Function
  remove: Function
  reset: Function
  restart: Function
  reverse: Function
}

interface AnimeResult {
  finished: Promise<any>
  add(args: AnimeArguments): AnimeResult
}

interface Anime {
  (a: AnimeArguments): AnimeResult
  timeline(args: AnimeArguments): AnimeResult
}

export default {
  install: function(vue: typeof Vue) {
    vue.prototype.$anime = anime
  },
}

declare module 'vue/types/vue' {
  interface Vue {
    $anime: Anime
  }
}
